<template>
  <div class="sjfx">
    <tabbar></tabbar>

    <!-- 页面标题 -->
    <div class="pageTitle">
      <p>生态环境数据分析</p>
      <p>
        <img src="@/assets/sthj/img/book.png" alt="" />
        <span>生态环境质量报告</span>
      </p>
    </div>

    <!-- 头部展示卫星图 -->

    <div class="header">
      <img src="@/assets/sthj/img/yzb.png" alt="" class="" />
      <div class="wxt">
        <div class="dt">
          <el-amap
            :vid="'amapDemo'"
            :center="center"
            :zoom="zoom"
            :plugin="plugin"
            :amap-manager="amapManager"
          >
            <!-- 多边形 -->
            <el-amap-polygon
              strokeColor="#0050E7"
              strokeWeight="5"
              strokeOpacity="1"
              fillColor="#c9ebf7"
              fillOpacity="0.2"
              ref="map"
              v-for="(polygon, index) in polygons"
              :key="index"
              :path="polygon.Ce.path"
            />
          </el-amap>
        </div>


        <img src="@/assets/sthj/img/bzd.png" class="bzd" />
        <div class="situationList">
          <p>物种数量</p>
          <p><span style="background: #e84b30"></span>>2000</p>
          <p><span style="background: #edc24b"></span>1000-2000</p>
          <p><span style="background: #00e584"></span> &lt;1000</p>
        </div>
      </div>

      <img src="@/assets/sthj/img/yzb.png" alt="" class="yzb" />
    </div>

    <!-- 物种数量排名及变化趋势 -->
    <div class="species">
      <!-- 物种数量排名 -->
      <div class="rank">
        <div class="species-title">
          <p>物种数量排名</p>
        </div>
        <div class="species-content">
          <div class="rankChart" id="rankChart"></div>
        </div>
      </div>

      <div class="trend">
        <div class="species-title">
          <p>物种数量变化趋势</p>
          <div class="date">
            <el-select
              v-model="trendValue"
              placeholder="请选择"
              @change="selectedChange"
            >
              <el-option
                v-for="item in trendOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="species-content">
          <div class="trendChart" id="trendChart"></div>
        </div>
      </div>
    </div>

    <!-- 新闻通报等 -->
    <Article :articleContent="articleContent"></Article>

    <Footer></Footer>
  </div>
</template>

<script>



import Article from "../../../components/sthj/article.vue";
import Footer from "../../../components/sthj/footer.vue";
import tabbar from "../../../components/sthj/tabbar.vue";
import { article } from "@/components/mixins/ArticleTitle.js";
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager(); //
export default {
  components: { tabbar, Article, Footer },
  name: "HcdcpSthj",
  mixins: [article],
  data() {
    return {
   
      selectIndex: 0,
      //获取新闻的范围
      minArticle: 18,
      maxArticle: 22,
      //初始化物种变化趋势下拉框
      trendOptions: [
        {
          value: "2020",
          label: "2020",
        },
        {
          value: "2021",
          label: "2021",
        },
        {
          value: "2022",
          label: "2022",
        },
      ],
      trendValue: "2020",
      // 初始化物种变化趋势图表对象
      TrendChart: null,
      trendOption: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "1月",
            "2月",
            "3月",
            "4月",
            "5月",
            "6月",
            "7月",
            "8月",
            "9月",
            "10月",
            "11月",
            "12月",
          ],
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        grid: {
          width: "100%",
          left: 0,
        },
        tooltip: {
          axisPointer: {
            type: "cross",
          },
        },
        series: [
          {
            data: [420, 532, 401, 534, 690, 780, 880, 920, 960, 845, 855, 920],
            type: "line",
            areaStyle: {
              color: "#60F1C8",
            },
            showSymbol: false,
            lineStyle: {
              opacity: 0,
            },
          },
          {
            data: [420, 442, 484, 624, 588, 649, 646, 534, 690, 780, 880, 920],
            type: "line",
            areaStyle: {
              color: "#2CD9C5",
            },
            showSymbol: false,
            lineStyle: {
              opacity: 0,
            },
          },
        ],
      },
      // 高德地图
      amapManager,
      zoom: 10,
      center: [114.364022, 25.190073],
      plugin: [
        {
          pName: "MapType",
          defaultType: 1,
        },
      ],
      // 画行政区
      district: null,
      polygons: [],
      // 经纬度
      one: [
        [114.150517, 25.161589],
        [114.168502, 25.134408],
        [114.189888, 25.115417],
        [114.217893, 25.11129],
        [114.244526, 25.128302],
        [114.248572, 25.150326],
        [114.262232, 25.16116],
        [114.286878, 25.162361],
        [114.351349, 25.198359],
        [114.404315, 25.233662],
        [114.436681, 25.283857],
        [114.559092, 25.338269],
        [114.571828, 25.363908],
        [114.556566, 25.38567],
        [114.521234, 25.379563],
        [114.467364, 25.345535],
        [114.406626, 25.311497],
        [114.358623, 25.318208],
        [114.331219, 25.312506],
        [114.306746, 25.283484],
        [114.208283, 25.289765],
        [114.193591, 25.301012],
        [114.16558, 25.296191],
        [114.071793, 25.26668],
        [114.036653, 25.238695],
        [114.02698, 25.24675],
        [114.021426, 25.261014],
        [114.010319, 25.258491],
        [114.002525, 25.239161],
        [113.989237, 25.233493],
        [113.985407, 25.215324],
        [113.969217, 25.195909],
        [113.969877, 25.177812],
        [113.965044, 25.157226],
        [113.977561, 25.141338],
        [114.009305, 25.13415],
        [114.026551, 25.133043],
        [114.049289, 25.1655],
        [114.087134, 25.1675],
        [114.103996, 25.167879],
        [114.125665, 25.166393],
      ],
      two: [
        [114.205463, 25.146815],
        [114.238153, 25.146815],
        [114.246258, 25.167947],
        [114.261229, 25.179133],
        [114.267274, 25.197074],
        [114.279499, 25.212528],
        [114.296187, 25.230776],
        [114.314935, 25.243431],
        [114.39748, 25.289071],
        [114.399902, 25.292447],
        [114.399062, 25.295202],
        [114.396077, 25.296948],
        [114.393778, 25.2959],
        [114.382998, 25.291021],
        [114.369471, 25.286763],
        [114.34379, 25.278245],
        [114.331448, 25.278211],
        [114.325362, 25.271907],
        [114.319277, 25.270881],
        [114.30472, 25.277178],
        [114.291055, 25.26928],
        [114.240345, 25.273705],
        [114.210845, 25.26472],
        [114.194893, 25.264885],
        [114.181001, 25.25884],
        [114.174529, 25.265089],
        [114.169607, 25.264827],
        [114.158504, 25.256803],
        [114.145741, 25.244479],
        [114.146711, 25.231067],
        [114.141187, 25.22964],
        [114.138926, 25.223865],
        [114.151006, 25.191715],
        [114.190896, 25.147126],
      ],
      three: [
        [114.199989, 25.176841],
        [114.202215, 25.178201],
        [114.205002, 25.182084],
        [114.225621, 25.194279],
        [114.235244, 25.191366],
        [114.242803, 25.192395],
        [114.246928, 25.196841],
        [114.245938, 25.203676],
        [114.242171, 25.212373],
        [114.247503, 25.220915],
        [114.252529, 25.227049],
        [114.258132, 25.223439],
        [114.265451, 25.222313],
        [114.266548, 25.224603],
        [114.266615, 25.236987],
        [114.264117, 25.23918],
        [114.26385, 25.241684],
        [114.260226, 25.246071],
        [114.256436, 25.24411],
        [114.252646, 25.245876],
        [114.244036, 25.253135],
        [114.243494, 25.250922],
        [114.240054, 25.250175],
        [114.237558, 25.252611],
        [114.232445, 25.246934],
        [114.228887, 25.246554],
        [114.22533, 25.247262],
        [114.219073, 25.245415],
        [114.209126, 25.246519],
        [114.208485, 25.244505],
        [114.206556, 25.243112],
        [114.203299, 25.24413],
        [114.200111, 25.240849],
        [114.196924, 25.23392],
        [114.193952, 25.234134],
        [114.191494, 25.234037],
        [114.189669, 25.230271],
        [114.193348, 25.224584],
        [114.190504, 25.212684],
        [114.189383, 25.191405],
        [114.189544, 25.189541],
        [114.190397, 25.189444],
        [114.200263, 25.195948],
        [114.201976, 25.195948],
        [114.202832, 25.194744],
        [114.199308, 25.176958],
      ],
      four: [
        [114.639313, 25.080882],
        [114.652377, 25.086776],
        [114.658576, 25.095156],
        [114.662886, 25.105557],
        [114.707021, 25.12093],
        [114.716729, 25.132501],
        [114.712704, 25.14345],
        [114.700535, 25.157265],
        [114.682756, 25.166374],
        [114.67871, 25.183249],
        [114.679642, 25.189172],
        [114.676111, 25.196026],
        [114.665958, 25.196997],
        [114.614105, 25.169132],
        [114.549891, 25.152448],
        [114.44069, 25.138968],
        [114.368225, 25.09813],
        [114.305213, 25.093874],
        [114.290267, 25.084643],
        [114.286077, 25.070417],
        [114.296994, 25.054945],
        [114.305164, 25.030139],
        [114.298777, 25.005288],
        [114.291361, 24.970474],
        [114.294569, 24.968607],
        [114.300692, 24.969307],
        [114.305099, 24.971252],
        [114.317602, 24.972536],
        [114.325399, 24.974267],
        [114.336114, 24.979889],
        [114.337888, 24.973314],
        [114.340563, 24.974705],
        [114.346328, 24.982942],
        [114.355734, 24.980292],
        [114.36514, 24.981065],
        [114.377052, 24.972038],
        [114.38215, 24.975149],
        [114.390681, 24.989152],
        [114.39432, 24.98456],
        [114.394526, 24.971255],
        [114.402285, 24.967752],
        [114.41073, 24.969852],
        [114.444006, 24.987124],
        [114.481586, 25.033094],
        [114.541826, 25.065363],
        [114.570638, 25.087908],
        [114.581704, 25.08577],
        [114.596202, 25.093582],
        [114.621423, 25.082155],
      ],
      five: [
        [114.437378, 25.010344],
        [114.437022, 25.025141],
        [114.441308, 25.03845],
        [114.471947, 25.067496],
        [114.499838, 25.09778],
        [114.497754, 25.105902],
        [114.494297, 25.10905],
        [114.483884, 25.107291],
        [114.472441, 25.109574],
        [114.460885, 25.109477],
        [114.445895, 25.088549],
        [114.417859, 25.077569],
        [114.409565, 25.061223],
        [114.384104, 25.045497],
        [114.343193, 25.045322],
        [114.335242, 25.038615],
        [114.337677, 25.032394],
        [114.346448, 25.015906],
        [114.360712, 25.001905],
        [114.374509, 24.998793],
        [114.429849, 25.003771],
      ],
    };
  },

  mounted() {
    console.log(this.$route.meta);
    this.initRank();
    this.initTrend();
    this.$nextTick(() => {
      setTimeout(() => {
        this.drawBounds();
        this.area(this.one, "#55D959");
        this.area(this.two, "#C2A439");
        this.area(this.three, "#D20202");
        this.area(this.four, "#55D959");
        this.area(this.five, "#C2A439");
      }, 1500);
    });
  },

  methods: {
    // 初始化物种数量排名图表
    initRank() {
      const myChart = this.$echarts.init(document.getElementById("rankChart"));
      var option = {
        xAxis: {
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
          },
          data: [
            "物种A",
            "物种B",
            "物种C",
            "物种D",
            "物种E",
            "物种F",
            "物种G",
            "物种H",
            "物种I",
            "物种J",
            "物种K",
            "物种L",
            "物种M",
            "物种N",
            "物种O",
          ],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          show: true,
          width: "95%",
          height: "85%",
          top: 10,
          left: 50,
        },
        series: [
          {
            data: [
              120, 200, 150, 80, 70, 110, 130, 120, 200, 150, 80, 70, 110, 130,
              110,
            ],
            type: "bar",
            itemStyle: {
              color: "#2CD9C5",
              borderRadius: [100, 100, 0, 0],
            },
            barWidth: "20",
          },
        ],
      };
      myChart.setOption(option);
    },
    // 初始化物种变化趋势图表
    initTrend() {
      this.TrendChart = this.$echarts.init(
        document.getElementById("trendChart")
      );

      this.TrendChart.setOption(this.trendOption);
    },
    //初始化物种变化趋势下拉框改变重新获取echart数据
    selectedChange() {
      this.TrendChart.clear();
      this.TrendChart.setOption(this.trendOption, true);
    },
    // 画行政区
    drawBounds() {
      let that = this;
      //加载行政区划插件
      if (!that.district) {
        //实例化DistrictSearch
        let opts = {
          subdistrict: 0, //获取边界不需要返回下级行政区
          extensions: "all", //返回行政区边界坐标组等具体信息
          level: "city", //查询行政级别为 市
        };
        that.district = new AMap.DistrictSearch(opts);
      }
      //行政区查询
      that.district.search("南雄市", (status, result) => {
        that.polygons = [];
        let bounds = result.districtList[0].boundaries;
        if (bounds) {
          for (let i = 0, l = bounds.length; i < l; i++) {
            //生成行政区划polygon
            let polygon = new AMap.Polygon({
              path: bounds[i],
            });
            that.polygons.push(polygon);
          }
        }
        AMap.Polygon.bind(that.polygons);
        // that.$refs.map.$amap.setFitView(that.polygons); //视口自适应
      });
    },
    area(path, fillColor) {
      const map = amapManager.getMap();
      var polygon = new AMap.Polygon({
        // 这些就是图形的一些基本样式了，颜色 线条粗细 透明度之类的
        path,
        strokeColor: "#FFFFFF",
        strokeWeight: 2,
        strokeOpacity: 1,
        fillOpacity: 0.5,
        fillColor,
        zIndex: 50,
      });
      map.add(polygon);
      // 缩放地图到合适的视野级别
      // map.setFitView([polygon]);
    },
  },
};
</script>

<style lang="less" scoped>
.dt {
  width: 1200px;
  height: 560px;
}
.sjfx {
  width: 100%;
  height: auto !important;
  background-color: #fafafa;
}


.sy-widow {
  padding: 0 16px;
  width: 140px;
  height: 40px;
  line-height: 40px;
  background: #cef3ff;
  border-radius: 4px;
  font-size: 16px;
}
.dt {
  width: 1200px;
  height: 560px;
}

//页面标题
.pageTitle {
  width: 1200px;
  margin: 20px auto;
  height: 50px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  p:nth-child(1) {
    height: 100%;
    font-size: 32px;
    font-family: PangMenZhengDao;
    color: #333333;
    line-height: 50px;
  }
  p:nth-child(2) {
    min-width: 280px;
    height: 50px;
    border-radius: 4px;
    border: 1px solid rgba(51, 51, 51, 0.2);
    text-align: center;
    line-height: 50px;
    img {
      width: 21px;
      height: 26.5px;
      vertical-align: middle;
      margin: 0 10px;
    }
    span {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}

//头部卫星图展示

.selectActive {
  color: rgba(255, 255, 255, 1) !important;
  background: url("../../../assets/sthj/img/xxk.png");
}
.header {
  width: 1920px;
  height: 552px;

  display: flex;
  justify-content: center;
  img {
    height: 100%;
  }
  .wxt {
    width: 1200px;
    height: 100%;
    margin: 0 11px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
    }
    .bzd {
      position: absolute;
      width: 150px;
      height: 10px;
      top: -10px;
      left: 20px;
    }
    .situationList {
      width: 140px;
      height: 180px;
      background: #000000;
      opacity: 0.6;
      position: absolute;
      top: 0px;
      left: 20px;
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      p:nth-child(1) {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff !important;
      }
      p {
        margin: 12px 20px;
        color: white;
        display: flex;
        align-items: center;
        opacity: 1;
        span {
          display: inline-block;
          width: 24px;
          height: 12px;

          border-radius: 2px;
          margin-right: 12px;
        }
        img {
          vertical-align: middle;
          width: 12px;
          height: 18px;
          margin: 0 16px 0px 8px;
        }
      }
    }
  }
}

//物种排名以及趋势
.species {
  width: 1200px;
  height: 1000px;
  background: #ffffff;
  margin: 24px auto !important;

  div {
    width: 100%;
    height: 50%;
    padding: 20px;
    .species-title {
      width: 100%;
      height: 55px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 2px solid #e9e9e9;
      p:nth-child(1) {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 600;
        color: black;
      }
      .date {
        width: 220px;
        height: 130px;
      }
    }
    .species-content {
      width: 100%;
      height: 400px;
      div {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>